<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<!-- 背景 -->
		<view class="posabs zin-1 wth100">
			<view class="top">
			</view>
			<view class="top-header">
			</view>
		</view>
		<!-- 背景 -->
		<view class="">
			<view class="font500 colf size30" style="padding-left: 30rpx;width: 70%;"
				:style="{ paddingTop: topHight + 'px' }">
				{{ userinfo.stores_name }}
			</view>
			<view class="min30_rl" style="height: 30px; margin-top: 14px;">
				<u-search placeholder="请输入商品名、门店名、类型搜索" v-model="keyword" :showAction="false" height="30"></u-search>
			</view>
		</view>
		<view class="min30 background_f rad1 pad20 column">
			<view class="row">
				<view class="minauto text_center" @click="$jump.nav('/indexpackage/store/new_orders')">
					<view class="posrel zin1 disflex" style="height: 120rpx;width: 120rpx;">
						<view class="box rad50 size28 colf text_center minau minright0">
							{{ num <= 99 ? num : 99 }}
						</view>
						<image src="@/static/image/172.png" mode="" class="posabs zin-1 minauto"
							style="width: 120rpx;height: 120rpx;left: 0;right: 0;"></image>
					</view>
					<view class="col3 size30 font500 mintop10">
						新订单
					</view>
				</view>
				<view class="minauto text_center" @click="getCode">
					<image src="@/static/image/166.png" mode="" style="width: 120rpx;height: 120rpx;"></image>
					<view class="col3 size30 font500 mintop10">
						扫码核销
					</view>
				</view>
			</view>
			<view class="row mintop40">
				<view class="minauto row align_item_c size28 col0 font500"
					@click="$jump.nav('/indexpackage/store/orders?current=' + 0)">
					<image src="@/static/image/173.png" class="minright10" style="width: 30rpx;height: 32rpx;"></image>
					历史订单
				</view>
				<view class="minauto row align_item_c size28 col0 font500"
					@click="$jump.nav('/indexpackage/store/orders?current=' + 1)">
					<image src="@/static/image/Vor.png" class="minright10" style="width: 32rpx;height: 32rpx;"></image>
					已完成
				</view>
				<view class="minauto row align_item_c size28 col0 font500"
					@click="$jump.nav('/indexpackage/store/orders?current=' + 2)">
					<image src="@/static/image/174.png" class="minright10" style="width: 32rpx;height: 32rpx;"></image>
					已取消
				</view>
			</view>
		</view>
		<view class="row">
			<view class="flex1 text_center column size36" :class="tabIndex == 1 ? 'font600 tab' : 'font500 col6'"
				@click="onTab(1)">
				{{ waiting_pickup }}
				<view class="size26 mintop10">
					今日待取货
				</view>
			</view>
			<view class="flex1 text_center column size36" :class="tabIndex == 2 ? 'font600 tab' : 'font500 col6'"
				@click="onTab(2)">
				{{ finish }}
				<view class="size26 mintop10">
					今日已取货
				</view>
			</view>
		</view>
		<view class="empty" style="margin-top: 200rpx;" v-if="list.length == 0">
			<u-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<view class="" v-else>
			<view class="column rad1 min30_rl pad20 background_f" style="margin-top: 20rpx;"
				v-for="(item,index) in list" :key="index">
				<view class="row just_cont_spacebet size28 col0 font500">
					订单编号：{{ item.order_no }}
					<view class="font600" style="color: #FE3C3C;" v-if="tabIndex == 0">
						已取货
					</view>
					<view class="font600" style="color: #FE3C3C;" v-if="tabIndex == 1">
						等待取货
					</view>
				</view>
				<view class="mintop20 row">
					<view style="width: 25%;">
						<image :src="item.order_product.goods_cover" mode="" style="width: 95%;height: 130rpx;"></image>
					</view>
					<view class="disflex align_item_c just_cont_flexend size22 font500 col6" style="width: 16%;">
						共{{ item.total_specs_num }}件
						<u-icon name="arrow-right" color="#666" size="11"></u-icon>
					</view>
				</view>
				<view class="minauto minright0 mintop30 font600" style="width: 240rpx;">
					<u-button text="订单详情" shape="circle" customStyle="color: #333;" color="#FFAD4C" hairline="false"
						size="small" @click="$jump.nav('/indexpackage/store/orders_info?id=' + item.id + '&total_price=' + item.total_price + '&shop_total_price=' + item.shop_total_price +
						 '&create_time=' + item.create_time + '&order_status=' + item.order_status)"></u-button>
				</view>
			</view>
			<view style="padding: 40rpx 0;"><u-loadmore :status="status" /></view>
		</view>

		<!-- 底部tab -->
		<block>
			<storeTab :item="0"></storeTab>
		</block>
		<!-- 底部tab -->
	</view>
</template>

<script>
	import storeTab from "@/components/tabBar/storeTab.vue"
	export default {
		components: {
			storeTab
		},
		data() {
			return {
				topHight: '',
				user_id: '',
				num: '',
				waiting_pickup: '',
				finish: '',
				tabIndex: 1,
				page: 1,
				status: 'nomore',
				userinfo: {},
				loadmore: [],
				list: [],

			}
		},
		onPullDownRefresh() {
			console.log(123);
			this.page = 1
			this.tabIndex = 1
			this.status = 'nomore'
			this.getWritten()
			this.getStatistics()
			this.getOrderList()
			this.getUserinfo()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad() {
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight + 16
			uni.hideTabBar({
				animation: true, // 是否需要动画效果
				success: function() {
					console.log('TabBar has been hidden successfully');
				},
				fail: function(err) {
					console.error('Failed to hide TabBar:', err);
				}
			});
		},
		onShow() {
			const user_type = uni.getStorageSync('user_type');

			if (user_type != 2) {
				console.log(user_type)
				uni.switchTab({
					url: '/pages/user/index',
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}
				});
				return
			}
			//当前页面展示的时候他就执行该生命周期
			this.user_id = uni.getStorageSync('user_id');
			const token = uni.getStorageSync('token');
			if (token) {
				//如果存在token
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 10 // 滚动动画时长，默认300ms
				});
				this.page = 1
				this.getWritten()
				this.getStatistics()
				this.getOrderList()
				this.getUserinfo()
				//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
				//那么我们一起来获取用户信息
			} else {

				uni.showToast({
					title: '您还未登录，正在前往登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.navigateTo({
						url: "/mypackage/user/login"
					})
				}, 1000)
			}
		},
		onReachBottom() {
			if (this.page < 0) return;
			this.status = 'loading';
			this.page = ++this.page
			this.getOrderList()
			setTimeout(() => {
				console.log(this.loadmore);
				if (this.loadmore.length == 0) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			async getUserinfo() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/user_info/" + this.user_id)
				if (code == 200) {
					this.userinfo = data

				} else {
					console.log(message);
				}
			},
			async getWritten() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("shop/Written/" + this.user_id, {
					page: 1
				})
				if (code == 200) {
					this.num = data.pagination.total
				} else {
					console.log(message);
				}
			},
			async getStatistics() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("shop/statistics/" + this.user_id, {
					page: 1
				})
				if (code == 200) {
					this.waiting_pickup = data.waiting_pickup
					this.finish = data.finish
				} else {
					console.log(message);
				}
			},
			async getOrderList() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("shop/today_order/" + this.user_id, {
					type: this.tabIndex,
					page: this.page
				})
				if (code == 200) {
					if (this.page != 1) {
						this.loadmore = data.items
						for (var i = 0; i < data.items.length; i++) {
							this.list.push(data.items[i]); // 加载的数据追加在上一页后面
						}
					} else {
						this.loadmore = data.items
						this.list = data.items
					}
				} else if (code == 500) {
					this.list = data
					this.loadmore = data
				} else {
					console.log(message);
				}
			},
			onTab(index) {
				this.tabIndex = index
				this.page = 1
				this.loadmore = []
				this.list = []
				this.getOrderList()
			},
			async Verification() {
				var _this = this
				let {
					code,
					message,
					data
				} = await _this.$com.fetchGet("shop/Verification", {
					user_id: _this.user_id
				})
			},
			getCode() {
				var _this = this
				uni.scanCode({
					success(res) {
						console.log(res.result);
						_this.Verification()
						uni.navigateTo({
							url: '/indexpackage/web/web?url=' + encodeURIComponent(res.result)
						});
					},
					fail(err) {
						console.log(err, 123);
					}
				});
			},

		}
	}
</script>

<style scoped lang="less">
	.top {
		height: 250rpx;
		background-image: linear-gradient(120deg, #ff5a58 0%, #ff7e3f 100%);
	}

	.top-header {
		height: 120rpx;
		background-image: linear-gradient(120deg, #ff5a58 0%, #ff7e3f 100%);
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	.box {
		background: #FF2D2D;
		width: 40rpx;
		height: 40rpx;
	}

	.tab {
		color: #F45800;
	}
</style>